<template>
  <el-dialog title="角色详情" :close-on-click-modal="false" @close="close" :visible.sync="visible">
    <el-form v-loading="loading">
      <el-form-item label="角色名" :label-width="formLabelWidth">
        {{ detail.roleName }}
      </el-form-item>
      <el-form-item label="角色编码" :label-width="formLabelWidth">
        {{ detail.roleCode }}
      </el-form-item>
      <el-form-item label="角色描述" :label-width="formLabelWidth">
        {{ detail.roleDesc }}
      </el-form-item>
      <el-form-item label="权限管理" :label-width="formLabelWidth">
        <c-tree
          style="height: 300px;overflow: auto;"
          ref="resourceTree"
          check-strictly
          show-checkbox
          disabled-checkbox
          node-key="id"
          :default-expanded-keys="resourceDefault"
          :data="resourceTree"
          :props="resourceProps">
        </c-tree>
      </el-form-item>
    </el-form>
    <div slot="footer" class="dialog-footer">
      <el-button type="primary" @click="visible = false">关 闭</el-button>
    </div>
  </el-dialog>
</template>

<script>
import Options from '@/constants/Options'

export default {
  name: 'SDialogDetail',
  props: {
    data: {
      type: Object,
      default () {
        return {
          resourceTree: []
        }
      }
    }
  },
  data () {
    return {
      formLabelWidth: '120px',
      detail: {
        roleName: this.data.detail.roleName,
        roleCode: this.data.detail.roleCode,
        roleDesc: this.data.detail.roleDesc
      },
      resourceProps: {
        children: 'nodes',
        label: 'text'
      },
      resourceDefault: [Options.ResTreeRoot],
      loading: false,
      visible: true
    }
  },
  computed: {
    resourceTree () {
      return this.data.resourceTree
    }
  },
  mounted () {
    this.loading = true
    this.$service.system.detailRole({id: this.data.detail.id}).then(res => {
      const data = res.data
      this.detail = this.$lodash.pick(data.roleInfo, ['id', 'roleName', 'roleCode', 'roleDesc'])
      this.$refs['resourceTree'].setCheckedKeys(data.resourceInfo)
      this.resourceDefault = data.resourceInfo
    }).finally(() => {
      this.loading = false
    })
  },
  methods: {
    close () {
      this.$emit('close')
    }
  }
}
</script>

<style>

</style>
